<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理收货地址</title>

    <!--公用css引用-->
    <?php include 'include/style.php';?>
    <!--END/公用css引用-->
    <link rel="stylesheet" href="../css/userCenter.css">
</head>
<body>

<!--公共头部-->
<?php include 'include/header.php';?>
<!--END/公共头部-->

<div class="inbox user-center">
    <div class="layout-margin unend">
        <div class="sidebar-end"></div>
        <div class="sidebar-start">
            <?php include 'include/leftnav.php';?>
        </div>

        <!--主体部分-->
        <div class="container">
            <div class="container-inner u-order">
                <div class="ui-brd-box1-">
                    <div class="tit-2 tit-skin-2">
                        <span class="h">地址管理</span>
                    </div>
                </div>

                <div class="address-content">
                    <form class="js-form bl-form bl-formhor form-L form-resume ajax-edit-on ajax-edit-on-add" method="post" action="" novalidate="novalidate">

                        <!--信息展示-->
                        <div class="ajax-info">
                            <ul class="ajax-info-group ul-group address-list">
                                <!--TPL-->
                                <li class="item js-tpl fn-hide">
                                    <span class="fn-hide"  data-name="IsDef" data-value="false"></span>
                                    <span class="fn-hide"  data-name="CardId" data-value=""></span>
                                    <div class="tit-5" data-name="Id" data-value="">
                                        <div class="h"><span data-name="Note" class="name"></span><span class="bl-label fn-ml20">默认地址</span></div>
                                        <div class="more">
                                            <a class="js-setDef set-def fn-mr4" href="javascript:;">设为默认地址</a>
                                            <a class="js-edit fn-mr4" href="javascript:;">编辑</a>
                                            <a class="js-del" href="javascript:;">删除</a>
                                        </div>
                                    </div>
                                    <p>
                                        <span class="w-8em text-color-7 fn-tr">收件人姓名：</span>
                                        <span class="txt" data-name="Addressee"></span>
                                    </p>
                                    <p>
                                        <span class="w-8em text-color-7 fn-tr">地址：</span>
                                        <span class="txt" data-name="Area" data-value=""></span>
                                        <span class="txt" data-name="Address"></span>
                                    </p>
                                    <p>
                                        <span class="w-8em text-color-7 fn-tr">手机：</span>
                                        <span class="txt" data-name="Mobile" data-value=""></span>
                                    </p>
                                    <p>
                                        <span class="w-8em text-color-7 fn-tr">固定电话：</span>
                                        <span class="txt" data-name="Phone" data-value=""></span>
                                    </p>
                                </li>
                                <!--TPL-->

                                <li class="bl-form-group item def-address" data-id="1">
                                    <span class="fn-hide"  data-name="IsDef" data-value="true"></span>
                                    <span class="fn-hide"  data-name="CardId" data-value="41072619555"></span>
                                    <div class="tit-5" data-name="Id" data-value="1">
                                       <div class="h"><span data-name="Note" class="name">王大锤</span><span class="bl-label fn-ml20">默认地址</span></div>
                                        <div class="more">
                                            <a class="js-setDef set-def fn-mr4" href="javascript:;">设为默认地址</a>
                                            <a class="js-edit fn-mr4" href="javascript:;">编辑</a>
                                            <a class="js-del" href="javascript:;">删除</a>
                                        </div>
                                    </div>

                                    <p>
                                        <span class="w-8em text-color-7 fn-tr">收件人姓名：</span>
                                        <span class="txt" data-name="Addressee">王大锤</span>
                                    </p>
                                    <p>
                                        <span class="w-8em text-color-7 fn-tr">地址：</span>
                                        <span class="txt" data-name="Area" data-value="17,1549">河南省 郑州市 中原区</span>
                                        <span class="txt" data-name="Address">中原西路中晟银泰国际中心2703</span>
                                    </p>
                                    <p>
                                        <span class="w-8em text-color-7 fn-tr">手机：</span>
                                        <span class="txt" data-name="Mobile" data-value="18712345000">186*****000</span>
                                    </p>
                                    <p>
                                        <span class="w-8em text-color-7 fn-tr">固定电话：</span>
                                        <span class="txt" data-name="Phone" data-value="0373-7654321">0371-76***21</span>
                                    </p>
                                </li>
                                <li class="bl-form-group item" data-id="2">
                                    <span class="fn-hide"  data-name="IsDef" data-value="false"></span>
                                    <span class="fn-hide"  data-name="CardId" data-value="410726198745554217"></span>
                                    <div class="tit-5" data-name="Id" data-value="2">
                                        <div class="h"><span data-name="Note" class="name">申长伟</span><span class="bl-label fn-ml20">默认地址</span></div>
                                        <div class="more">
                                            <a class="js-setDef set-def fn-mr4" href="javascript:;">设为默认地址</a>
                                            <a class="js-edit fn-mr4" href="javascript:;">编辑</a>
                                            <a class="js-del" href="javascript:;">删除</a>
                                        </div>
                                    </div>

                                    <p>
                                        <span class="w-8em text-color-7 fn-tr">收件人姓名：</span>
                                        <span class="txt" data-name="Addressee">申长伟</span>
                                    </p>
                                    <p>
                                        <span class="w-8em text-color-7 fn-tr">地址：</span>
                                        <span class="txt" data-name="Area" data-value="17,1549,1550">河南省 郑州市 中原区</span>
                                        <span class="txt" data-name="Address">中原西路中晟银泰国际中心</span>
                                    </p>
                                    <p>
                                        <span class="w-8em text-color-7 fn-tr">手机：</span>
                                        <span class="txt" data-name="Mobile" data-value="18612345000">186*****000</span>
                                    </p>
                                    <p>
                                        <span class="w-8em text-color-7 fn-tr">固定电话：</span>
                                        <span class="txt" data-name="Phone" data-value="0371-7654321">0371-76***21</span>
                                    </p>
                                </li>
                            </ul>
                        </div>

                        <!--添加按钮-->
                        <div class="ajax-add-more add-btn-wrap">
                            <a href="javascript:;" class="js-addMore fn-btn fn-mr10">新增收货地址</a>
                            <span class="text-color-7">您已创建<span class="num">3</span>个收货地址，最多可创建<span class="total">20</span>个收货地址。</span>
                        </div>

                        <!--信息提交-->
                        <ul class="fn-hide ul-group ajax-form">

                            <li class="bl-form-group">
                                <label><em class="text-color-6">*</em>所在地区：</label>
                                <div class="controls">
                                    <div class="select2-container fn-dib selectinput fn-mt6">
                                        <select id="area" class="elementJs" required="required" placeholder="请选择" tabindex="-1"></select>
                                    </div>
                                    <input class="js-areaInput" type="hidden" name="Area" value="">
                                </div>
                            </li>
                            <li class="bl-form-group">
                                <label><em class="text-color-6">*</em>详细地址：</label>
                                <div class="controls">
                                    <input id="detailAddress" class="fn-tinput fn-tinput-longer elementJs" required="" name="Address" type="text" value="" placeholder="详细地址">
                                </div>
                            </li>
                            <li class="bl-form-group">
                                <label><em class="text-color-6">*</em>收货人名称：</label>
                                <div class="controls">
                                    <input class="fn-tinput fn-tinput-longer elementJs" required="" name="Addressee" type="text" value="" placeholder="收货人名称">
                                </div>
                            </li>
                            <li class="bl-form-group">
                                <label><em class="text-color-6">*</em>身份证号码：</label>
                                <div class="controls">
                                    <input class="fn-tinput fn-tinput-longer elementJs" required="" name="CardId" type="text" value="" placeholder="身份证号码">
                                </div>
                            </li>

                            <li class="bl-form-group">
                                <label><em class="text-color-6">*</em>手机号码：</label>
                                <div class="controls">
                                    <input class="fn-tinput fn-tinput-longer elementJs" required="" name="Mobile" type="text" value="" placeholder="手机号">
                                </div>
                            </li>

                            <li class="bl-form-group">
                                <label>固定电话：</label>
                                <div class="controls">
                                    <input class="fn-tinput fn-tinput-longer elementJs" required="" name="Phone" type="text" value="" placeholder="固定电话">
                                </div>
                            </li>
                            <li class="bl-form-group">
                                <label>备注名：</label>
                                <div class="controls">
                                    <input class="fn-tinput fn-tinput-longer elementJs" required="" name="Note" type="text" value="" placeholder="输入一个方便记忆的名称吧">
                                </div>
                            </li>

                            <li class="bl-form-group bl-form-btns">
                                <label class="fn-vhide">提交：</label>
                                <div class="controls">
                                    <button class="fn-btn btn-primary fn-mr8 btn-save" type="submit">保存收货地址</button>
                                    <button class="fn-btn btn-nostyle btn-cancel" type="button">取消</button>
                                    <label><input type="checkbox" name="IsDef" >设为默认地址</label>
                                </div>
                            </li>
                        </ul>

                    </form>
                </div>



            </div>

        </div>
        <!--END/主体部分-->

    </div>
</div>

<!--公共尾部-->
<?php include 'include/footer.php'; ?>
<!--END/公共尾部-->

<!--公用js引用-->
<?php include 'include/script.php'; ?>
<!--END/公用js引用-->
<script src="../js/linkagesel/district-all.js"></script>
<script src="../js/linkagesel/linkagesel-min.js"></script>

<script src="../js/ajaxForm.js"></script>
<script src="../js/userCenter.js"></script>
<script>
    //地区选择实例化
    var areaInput = $('.js-areaInput');
    var opts = {
        data: districtData,     // districtData为district-all.js中定义的变量
        defVal:areaInput.val().split(','),
        selStyle: 'margin-left: 10px;',
        minWidth:80,
        fixWidth	: 0,
        select:  '#area',
        head		: '--请选择--',
        level		: 4,
        selClass	: '',		// 应用于自动创建的<select> class. 若初始化之前就存在的<select>会自动添加上
        loaderImg	: '../images/loading-1.gif'
    };
    var linkageSel = new LinkageSel(opts);
    districtData = opts = null; // 如果数据量大最好在创建LinkageSel实例之后清空

    linkageSel.onChange(function() {
        var detailAddress=$('#detailAddress'),
            d = this.getSelectedDataArr('name'),    // 所有有选定菜单的name. this === linkageSel2
            idArr = linkageSel.getSelectedArr(),
            arr = [];
        for (var i = 0, len = d.length; i < len; i++) {
            arr.push(d[i]);
        }
        areaInput.val(idArr);
        tools.log(d);
        areaInput.data('text', d.join(' '));
        //detailAddress.val(arr.join(' '));//详细地址赋值
    });

    //编辑时，赋值地区插件
    areaInput.on('input',function(){
        tools.log('input',areaInput.val());
        linkageSel.changeValues(areaInput.val().split(','),true);
    });

    //表单编辑操作
    var jqForm=$('.js-form');
    var ajaxForm= new AjaxForm(jqForm,{
        delUrl:'../js/success.json',//delete
        editUrl:'../js/success.json',///put
        addUrl:'../js/success.json',//post
/*        delType:'delete',
        editType:'put',
        addType:'post',*/
        editCb:function(formData,opts){
            if(formData.IsDef){
                var infoGroup=opts.curInfoGroup;
                infoGroup.addClass('def-address').siblings('.bl-form-group').removeClass('def-address').find('[data-name="IsDef"]').data('value',false);
            }
        }
    });

    //设置默认收货地址
    jqForm.on('click','.js-setDef',function(){
       var that=$(this),
           infoGroup=that.closest('.bl-form-group'),
           id=infoGroup.data('id');

        if(infoGroup.hasClass('def-address')) return false;

        $.ajax({
            url:'../js/success.json',//设置默认地址url
            type:'post',
            dataType:'json',
            data:{id:id},
            success:function(res){
                infoGroup.addClass('def-address').find('[data-name="IsDef"]').data('value',true);
                infoGroup.siblings('.bl-form-group').removeClass('def-address').find('[data-name="IsDef"]').data('value',false);
            }
        });


    });

</script>
</body>
</html>